<template>
  <div id="app">
    <div class="header">
      <v-header :seller="seller"></v-header>
    </div>
    <div class="tab border-1px">
      <a class="tab-item">
        <router-link to="/goods">
          商品
        </router-link>
      </a>
      <a class="tab-item">
        <router-link to="/ratings">
          评论
        </router-link>
      </a>
      <a class="tab-item">
        <router-link to="/seller">
          商家
        </router-link>
      </a>
    </div>
    <router-view :seller="seller"></router-view>
  </div>
</template>

<script>
  import header from './components/header/header'

  const ERR_OK  = 0;

  export default {
    data() {
      return {
        seller: {}
      }
    },
    components: {
      'v-header': header
    },
    beforeCreate:function () {
      /*页面重定向*/
      this.$router.push('/');
    },
    created() {
      this.$http.get('/api/seller').then((response ) => {
        response = response.body;
        if (response.errno === ERR_OK){
          this.seller = response.data;

        }
      })
    }

  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "./common/stylus/mixin.styl"
  #app
    .tab
      display: flex //布局样式
      width: 100%
      /*行高设为标注的一半 所有移动端都是按照两倍来标注的*/
      height: 40px
      /*行高设为标注的一半*/
      line-height: 40px
      /*border-bottom: 1px solid rgba(7,17,27,0.1)*/
      border-1px(rgba(7,17,27,0.1))
      .tab-item
        flex: 1
        text-align: center
        /*点击区块也能选中全部*/
        /*可以被继承的放在后面*/
        & > a
          display: block
          font-size: 14px
          color: rgb(77,85,93)
          &.active
            color :rgb(240,20,20)
</style>
